<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>template-1.0-traditional</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link href="" rel="stylesheet" />
        <script src="script/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"> </script>
        <script src="script/jquery easing/jquery.easing.1.3.js"></script>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            #div1{
                background: #F5F5F5;
                border:thin #ccc solid;
                height: 150px; 
                margin:0px 10px;
                position:relative;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("#btn").click(function() {
                    $("#div1").animate({
                        height : '550px',
                        width : '350px',
                        left:'300px'
                    },{
                        duration:800,
                        easing:'easeOutBounce',
                        complete:''
                        }).animate({
                            height:200
                        },{
                            duration:1000,
                            easing:'easeInQuad'
                        });
                });

            });
        </script>
    </head>
    <body>

    <h1>this is header!</h1>
    <input type="button" id="btn" value="button" />
    <div id="div1">
        
    </div>
    
    </body>
</html>
